<template>
    <div id='myJudgementWorks'>
        <div class='filter-container'>
            <el-radio-group v-model='queryParams.judgement' @change='changeStatusHandler'>
                <el-radio :label=false>未点评</el-radio>
                <el-radio :label=true>已点评</el-radio>
            </el-radio-group>
        </div>
        <!-- 内容 -->
        <div class='msg-container'>
            <!--            <div class='header-info'>-->
            <!--                <el-form :model='queryParams' @keydown.enter.prevent='queryHandler'>-->
            <!--                    <el-input v-model='queryParams.title' clearable placeholder='搜索作品' @clear='clearHandler' />-->
            <!--                </el-form>-->
            <!--            </div>-->
            <!--        作品列表-->
            <div v-if='JudgementWorksList.length' class='competition-list'>
                <div v-for='works in JudgementWorksList' :key='works.worksId' class='competition-item'>
                    <!--操作遮罩层-->
                    <div class='modal'>
                        <img v-if='works.judgement === true || works.judgement === false' title='查看作品'
                             src='@/assets/my/look.png' alt='查看'
                             @click='$router.push(`/worksDetail/${works.worksId}?judgeIds=${works?.judgeIds}`)'>
                        <!-- <img v-if='works.judgement === false' src='@/assets/my/edit.png' title='提交作品' alt='编辑'
                            @click='openPublishWorks(works.worksId)'> -->
                    </div>
                    <img class='cover' src='@/assets/images/login-background.jpg' alt='cover'>
                    <div class='main-content'>
                        <div class='top'>
                            {{ works.title }}
                        </div>
                        <div class='bottom'>
                            <div class='count-info'>
                                <div class='count'>
                                    <img src='@/assets/index/look.png' alt='look'>
                                    <span>{{ handleCount(works?.views || 0) }}</span>
                                </div>
                                <div class='count'>
                                    <img src='@/assets/index/collect.png' alt='collect'>
                                    <span>{{ handleCount(works?.collect || 0) }}</span>
                                </div>
                            </div>
                            <div v-if='works.judgement === false' class='status'>未点评</div>
                            <div v-else-if='works.judgement === true' class='status' style='color:#67C23A;'>已点评</div>
                            <div v-else class='status'></div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if='!queryParams.title && !JudgementWorksList?.length' class='competitions empty'>
                暂无作品
            </div>
            <div v-else-if='queryParams.title && !JudgementWorksList?.length && queried' class='competitions empty'>
                没有找到关键字[<span style='color: #E65D6E;'>{{ queryParams.title }}</span>]下的相关作品
            </div>
            <div v-else class='competitions empty'>
                暂无作品
            </div>

            <!--            分页-->
<!--            <div class='pagination'>-->
<!--                <pagination v-show='total > 0' v-model:limit='queryParams.pageSize' v-model:page='queryParams.pageNum'-->
<!--                            :total='total' layout='total, prev, pager, next' @pagination='getList' />-->
<!--            </div>-->

        </div>

    </div>
</template>
<script setup lang='ts'>
import { reactive, ref, toRefs } from 'vue';
import { handleCount } from '@/utils/sk';
import { _Works } from '@/api/model/Works';
import { getJudgementWorks } from '@/api/business/works';

const JudgementWorksList = ref<_Works[]>([]);
const queried = ref(false);
const total = ref(0);
/*请求参数定义*/
const data = reactive<{ form: any, queryParams: any }>({
    form: {},
    queryParams: {/* pageNum: 1, pageSize: 4, title: '',*/ judgement: false }
});
const { form, queryParams } = toRefs(data);

/*获取需点评作品列表*/
const getList = () => {
    getJudgementWorks(queryParams.value).then(res => {
        JudgementWorksList.value = res.rows;
        total.value = res.total;
    });
};
/*切换作品状态*/
const changeStatusHandler = () => {
    queryParams.value.pageNum = 1;
    getList();
};
/*查询*/
const queryHandler = () => {
    queried.value = true;
    queryParams.value.pageNum = 1;
    getList();
};
/*清除*/
const clearHandler = () => {
    queried.value = false;
    queryParams.value.title = '';
    queryParams.value.pageNum = 1;
    getList();
};
getList();
</script>
<style scoped lang='scss'>
.msg-container {
    border: 1px solid #efefef;
    padding: 20px;

    .header-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        :deep(.el-input__wrapper) {
            box-shadow: none;
            background: #F2F6FC;
        }
    }
}

.competition-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

    .count-info {
        display: flex;
    }

    .top {
        @include ellipsisOption(2);
    }

    .bottom {
        display: flex;
        justify-content: space-between;

        .count {
            display: flex;

            img {
                margin-right: 6px;
            }

            &:first-child {
                margin-right: 20px;
            }
        }
    }

    .competition-item {
        background: #F2F6FC;
        border-radius: 4px;
        display: flex;
        width: calc(50% - 54px);
        margin-right: 108px;
        padding: 10px;
        margin-bottom: 10px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;

        &:hover {
            box-shadow: var(--el-box-shadow);

            .modal {
                opacity: 1;
            }
        }

        .modal {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s;
            z-index: 1;

            img {
                width: 50px;
                height: 50px;
                margin: 0 10px;
                cursor: pointer;
            }

        }

        .status {
            font-size: 14px;
            font-weight: 400;
            color: #E6A23C;
            display: flex;
            align-items: center;

            .text {
                margin-right: 4px;
            }

            i {
                cursor: pointer;
            }
        }

        &:nth-child(2n) {
            margin-right: 0;
        }

        .cover {
            width: 100px;
            height: 100px;
            border-radius: 4px;
        }
    }

    .main-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 6px 0;
        margin-left: 10px;
        flex: 1;
    }
}
</style>
